<template>
    <div id="trafficInfo">
        <h2 class="traffic-title">交通信息</h2>
        <p class="traffic-tips">交通信息仅供参考，最终以供应商确认为准，飞行时长以实际为准</p>
        <div class="air-choose">
            <ul class="airTag">
                <li class="air-place" v-for="(item,index) in palces" :key="index" @click="crutchoose(index)" :class="{crut:index==n}">
                    {{item}}
                </li>
            </ul>
            <airPlace :title="palces[n]"></airPlace>
        </div>
        <ResProcess></ResProcess>
    </div>
</template>

<script>
import airPlace from "@/components/details/airPlace"
import ResProcess from '@/components/details/ResProcess';
export default {
    name:"trafficInfo",
    data(){
        return {
            palces:["上海-清迈","杭州-靖迈","上海-曼谷","杭州-曼谷","南京-曼谷"],
            n:0
        }
    },
    methods:{
        crutchoose(index){
            this.n = index;

        }
    },
    components:{
        airPlace:airPlace,
        ResProcess:ResProcess
    }
}
</script>

<style lang="less" scoped>
    #trafficInfo{
        padding-bottom: 10px;
        margin-bottom: 16px;
        .traffic-title{
            background-color: white;
            text-align: center;
            margin:0;
            padding: 0 0 16px 0;
        }
        .traffic-tips{
            background-color: white;
            padding: 0 10px;
            margin:0;
            text-align: center;
            color:#ff7467;
            font-size: 0.95em;
        }
        .air-choose{
            background-color: white;
            padding: 16px;
            .airTag{
                list-style-type: none;
                margin:0;
                padding: 0;
                padding-bottom: 10px;
                overflow: hidden;
                .air-place{
                    float:left;
                    margin-right:1.5em;
                    margin-bottom: 0.5em;
                    padding:0.5em 0.8em;
                    border:1px solid rgba(31, 32, 35, 0.1);
                    color:rgba(31, 32, 35, 0.8);
                    border-radius: 20px;
                }
                .crut{
                    border-color: #40c895;
                    color: #40c895;
                }
            }
        }
    }
</style>


